<script>
import { getParkingCardListApi, deleteMonthCardInfoApi } from '@/api/carCard'
export default {
  name: 'CarCard',
  data() {
    return {
      text: '',
      tableData: [{
        id: 15505,
        personName: '王小虎',
        phoneNumber: '1316668888',
        carNumber: '鲁C788UI',
        carBrand: '奔驰',
        totalEffectiveDate: 53,
        cardStatus: 0
      }, {
        id: 15505,
        personName: '王小虎',
        phoneNumber: '1316668888',
        carNumber: '鲁C788UI',
        carBrand: '奔驰',
        totalEffectiveDate: 53,
        cardStatus: 0
      }, {
        id: 15505,
        personName: '王小虎',
        phoneNumber: '1316668888',
        carNumber: '鲁C788UI',
        carBrand: '奔驰',
        totalEffectiveDate: 53,
        cardStatus: 0
      }, {
        id: 15505,
        personName: '王小虎',
        phoneNumber: '1316668888',
        carNumber: '鲁C788UI',
        carBrand: '奔驰',
        totalEffectiveDate: 53,
        cardStatus: 0
      }, {
        id: 15505,
        personName: '王小虎',
        phoneNumber: '1316668888',
        carNumber: '鲁C788UI',
        carBrand: '奔驰',
        totalEffectiveDate: 53,
        cardStatus: 0
      }],
      cardListParams: {
        pageSize: '2',
        page: '1',
        carNumber: '',
        personName: '',
        cardStatus: null
      },
      total: 0,
      selectValue: '',
      optionList: {
        all: null,
        useAble: '0',
        unUseAble: '1'
      },
      selectList: []
    }
  },
  computed: {
    statusString() {
      return 0
    },
    getIndex() {
      return (this.cardListParams.page - 1) * this.cardListParams.pageSize + 1
    }
  },
  async created() {
    await this.getParkingCardList()
  },
  methods: {
    // 得到表格中用户列表
    async getParkingCardList() {
      const res = await getParkingCardListApi(this.cardListParams)
      if (res.code === 10000) {
        this.tableData = res.data.rows
        this.total = res.data.total
      }
    },
    // 改变分页器中的每页显示条数时，触发
    handleSizeChange(value) {
      this.cardListParams.pageSize = value
      this.getParkingCardList()
    },
    // 点击分页器中当前页码,触发的函数
    handleCurrentChange(value) {
      this.cardListParams.page = value
      this.getParkingCardList()
    },
    // 单元格回传的数据,用来格式化数据
    cardStatusFormatter(row, column, cellValue, index) {
      const MAP = {
        0: '可用',
        1: '已过期'
      }
      return MAP[cellValue]
    },
    // 点击查询按钮触发的事件
    async searchCarCardInfo() {
      this.cardListParams.page = '1'
      await this.getParkingCardList()
    },
    // 点击编辑按钮
    editMonthCard(scope) {
      const { row } = scope
      this.$router.push({ path: `/parking/card/addMonthCard?id=${row.id}` })
    },
    // 点击删除按钮
    deleteMonthCard({ row }) {
      const id = row.id
      this.$confirm('是否删除月卡?', '温馨提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        await deleteMonthCardInfoApi(id)
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        // 如果当前列表数据<=1，则显示上一页的数据
        if (this.tableData.length === 1 && this.cardListParams.page > 1) {
          this.cardListParams.page = this.cardListParams.page - 1
        }
        // 更新数据
        this.getParkingCardList()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 批量删除数据
    async deleteSelect() {
      this.$confirm('是否批量删除以下数据？', '温馨提示', {
        type: 'warning'
      }).then(async() => {
        await deleteMonthCardInfoApi(this.selectList)
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        // 如果当前列表数据<=1，则显示上一页的数据
        if (this.tableData.length === 1 && this.cardListParams.page > 1) {
          this.cardListParams.page = this.cardListParams.page - 1
        }
        // 更新数据
        this.getParkingCardList()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
      // await deleteMonthCardInfoApi(this.selectList)
    },
    // 表格多选值发生变化时的事件
    handleSelectionChange(e) {
      // 收集要批量删除的id，并组合数据
      if (e) {
        this.selectList = e.map(item => item.id).join(',')
      }
    }
  }
}
</script>
<template>
  <div class="container">
    <div class="head">
      <div class="search-area">
        <div class="search-item">
          <span class="text">
            车牌号码：
          </span>
          <el-input v-model="cardListParams.carNumber" class="inputBox" placeholder="请输入车牌号码" />
        </div>
        <div class="search-item">
          <span class="text">
            车主姓名：
          </span>
          <el-input v-model="cardListParams.personName" class="inputBox" placeholder="请输入车牌号码" />
        </div>
        <div class="search-item">
          <span class="text">
            状态：
          </span>
          <el-select v-model="cardListParams.cardStatus" class="select-box" :popper-append-to-body="false" placeholder="请选择">
            <el-option class="select-option" label="全部" :value="optionList.all" />
            <el-option class="select-option" label="可用" :value="optionList.useAble" />
            <el-option class="select-option" label="已过期" :value="optionList.unUseAble" />
          </el-select>
        </div>
        <div class="search-item">
          <el-button class="search-btn" size="mini" type="primary" @click="searchCarCardInfo">查询</el-button>
        </div>
      </div>
    </div>
    <div class="body">
      <div class="left">
        <el-button class="left-btn" size="mini" type="primary" @click="$router.push({path:'/parking/card/addMonthCard'})">添加月卡</el-button>
        <el-button class="left-btn" size="mini" type="primary" @click="deleteSelect">批量删除</el-button>
      </div>
      <div class="right">
        <el-alert
          class="right-alert"
          description="本园区共计 1530 个车位，月卡用户 0 人，车位占有率 0% "
          show-icon
          :closable="false"
        />
      </div>
    </div>
    <div class="footer">
      <!-- 表格栏 -->
      <div class="table">
        <el-table
          ref="multipleTable"
          class="table-elTable"
          :data="tableData"
          tooltip-effect="dark"
          :header-cell-style="{backgroundColor:'#f4f6f8',color:'#000000D9','font-weight':'normal'}"
          style="width: 100%;"
          :fit="true"
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            type="selection"
            align="center"
          />
          <el-table-column
            label="序号"
            type="index"
            :index="getIndex"
          />
          <el-table-column
            prop="personName"
            label="车主名称"
          />
          <el-table-column
            prop="phoneNumber"
            label="联系方式"
            show-overflow-tooltip
          />
          <el-table-column
            prop="carNumber"
            label="车牌号码"
          />
          <el-table-column
            prop="carBrand"
            label="车辆品牌"
          />
          <el-table-column
            prop="totalEffectiveDate"
            label="剩余有效天数"
          />
          <el-table-column
            prop="cardStatus"
            label="状态"
            :formatter="cardStatusFormatter"
          >
            <!-- <template slot-scope="{row}">
              <span>
                {{ row.cardStatus===0?'可用':'已过期' }}
              </span>
            </template> -->
          </el-table-column>
          <el-table-column
            label="操作"
            fixed="right"
            width="250"
          >
            <template #default="scope">
              <div class="switchButton">
                <span>续费</span>
                <span>查看</span>
                <span @click="editMonthCard(scope)">编辑</span>
                <span @click="deleteMonthCard(scope)">删除</span>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页器 -->
      <div class="pagination">
        <el-pagination
          :current-page="Number(cardListParams.page)"
          :page-sizes="[2, 4, 5, 10]"
          :page-size="Number(cardListParams.pageSize)"
          layout="total, prev, pager, next, sizes"
          :total="total"
          popper-class="carcard-pagination-select"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.container {
  .head {
    height: 52px;
    width: 100%;
    .search-area{
      width: 100%;
      height: 52px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      .search-item {
        margin-right: 15px;
        .text{
          font-size: 14px;
          height: 32px;
        }
        .inputBox {
          width: 220px;
          height: 32px;
        }
        ::v-deep .el-input__inner{
            height: 32px;
        }
        .search-btn {
          width: 64px;
          height: 32px;
          font-size: 14px;
          letter-spacing:2px;
        }
        .select-box {
          .select-option {
              color: #000000D9;
              font-weight: normal;
          }
        }
      }
    }
  }
  .body {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    width: 100%;
    height: 40px;
    .left {
      display: flex;
      align-items: center;
      width: 184px;
      height: 40px;
      .left-btn {
        color: 14px;
        width: 88px;
        height: 32px;
      }
    }
    .right {
      width: 428px;
      height: 40px;
      .right-alert{
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        border: 1px solid #91d5ff;
        width: 428px;
        height: 40px;
        background-color: #e6f7ff;
        ::v-deep .el-icon-info {
          width: 18px;
          font-size: 20px;
          color: #1890ff;
        }
        ::v-deep .el-alert__content {

          .el-alert__description{

            font-size: 14px;
            color: #000000D9;
          }
        }
      }
    }
  }
  .footer {
    width: 100%;
    min-height: 350px;
    margin-top: 30px;
    .table {
      .table-elTable {
        .switchButton {
          span {
            color: #4770ff;
            margin-right: 15px;
            cursor: pointer;
          }
        }
      }
    }
    .pagination {
      display: flex;
      justify-content: right;
      margin-top: 10px;
      align-items: center;
      width: 100%;
      height: 24px;
      ::v-deep .el-pagination button {
        min-width: 10px;
        padding: 0;
      }
    }
  }
}
</style>
<style lang="scss" >
.carcard-pagination-select {
   .el-select-dropdown__item.selected {
    color: #000000D9;
  }
}
</style>
